<template>
    <div v-show="type != '0'" class="message">
        <div class="message-info">
            <div v-if="item.receiptStatus == 2" class="receipt">已读</div>
            <div v-if="item.receiptStatus == 1" class="receipt">未读</div>
            <div v-if="type == '1'" class="message-text">
                {{ item.message }}
            </div>
            <div v-if="type == '11'" class="message-img">
                <el-image
                    class="el-img"
                    :src="item.message"
                    :preview-src-list="[item.message]"
                    fit="cover"
                >
                </el-image>
            </div>
            <div
                v-if="type == '111' && item.message != '[表情]'"
                class="message-bqb"
            >
                <el-image
                    class="bqb-el-img"
                    :src="item.message"
                    :preview-src-list="[item.message]"
                    fit="cover"
                >
                </el-image>
            </div>
            <div
                v-if="type == 'order'"
                class="message-goods"
                @click="goOrder(getExtendedData(item))"
            >
                <!-- <div class="text">亲，商品已挑好，可直接购买哦</div> -->
                <div class="goods-info flex-center-1">
                    <img :src="getExtendedData(item).pic" alt="" />
                    <div class="title">
                        {{ getExtendedData(item).name }}
                        <span>
                            {{
                                getExtendedData(item).money == 0
                                    ? "面议"
                                    : "￥" + getExtendedData(item).money
                            }}
                        </span>
                    </div>
                </div>
                <!-- <div class="warning">价格：以实际下单为准</div> -->
            </div>
            <a
                v-if="type == 'file'"
                :href="getExtendedData(item).fileUlr"
                target="_self"
                :title="item.message"
                class="file"
            >
                <img
                    class="model_icon"
                    :src="getFileType(getExtendedData(item).fileUlr)"
                    alt=""
                />
                <div>
                    {{ item.message }}
                </div>
            </a>
            <div
                v-if="type == 'shop'"
                class="message-goods"
                @click="goShop(getExtendedData(item))"
            >
                <div class="goods-info flex-center-1">
                    <img :src="getExtendedData(item).pic" alt="" />
                    <div class="title">
                        {{ getExtendedData(item).name }}
                        <span>
                            {{
                                getExtendedData(item).price == 0
                                    ? "面议"
                                    : "￥" + getExtendedData(item).price
                            }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="time">{{ getTime(item.timestamp) }}</div>
        </div>
        <img
            :src="
                userInfo.is_server == 1 && userInfo.service_info
                    ? userInfo.service_info.logo
                    : userInfo.avatar
            "
            class="avatar"
            alt=""
        />
    </div>
</template>

<script>
import { getTime } from "@/assets/utils/utils";
import { mapState } from "vuex";
export default {
    name: "messageRight",
    props: {
        type: {
            type: String,
            default: "0",
        },
        item: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            getTime: getTime,
            getExtendedData: function (item) {
                return JSON.parse(item.extendedData);
            },
            getFileType: function (url) {
                let type = url.split(".");
                type = type[type.length - 1];
                switch (type) {
                    case "doc":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_word.png";
                    case "docx":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_word.png";
                    case "ppt":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_ppt.png";
                    case "pptx":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_ppt.png";
                    case "xls":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_excel.png";
                    case "xlsx":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_excel.png";
                    case "xlsm":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_excel.png";
                    case "pdf":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_pdf.png";
                    case "rar":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "zip":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "7z":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "gz":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "tar":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "bz2":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    case "iso":
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/model_zip.png";
                    default:
                        return "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/model/icon_xz.png";
                }
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        goOrder(item) {
            this.$router.push({
                path: "/placeorder",
                query: {
                    orderNo: item.order_no,
                },
            });
        },
        goShop(item) {
            this.$router.push({
                path: "/serviceshopsdetail",
                query: {
                    id: item.id,
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.message {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-bottom: 25px;
    .avatar {
        margin-right: 33px;
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50px;
        margin-left: 16px;
    }
}
.message-info {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    .receipt {
        // position: absolute;
        font-size: 14px;
        color: #999999;
        line-height: 100%;
        padding-bottom: 4px;
        padding-right: 6px;
    }
    .message-text,
    .message-img,
    .message-bqb {
        padding: 13px 22px;
        max-width: 420px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #d6d6d6;
    }
    .message-img {
        .el-img {
            width: 180px;
            height: 180px;
        }
    }
    .message-bqb {
        .bqb-el-img {
            width: auto;
            height: 180px;
        }
    }
    .message-text {
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        // text-align: right;
        // white-space: pre-line;
        word-wrap: break-word;
    }
    .time {
        width: 100%;
        text-align: right;
        margin-top: 8px;
        font-size: 12px;
        color: #999999;
    }
}

.message-goods {
    padding: 13px 22px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #d6d6d6;
    width: 326px;
    cursor: pointer;
    .text {
        font-size: 18px;
        color: #333333;
    }

    .goods-info {
        width: 100%;
        height: 64px;
        background: #f9f9f9;
        border-radius: 4px;

        img {
            width: 64px;
            height: 64px;
            border-radius: 4px;
        }

        .title {
            padding-left: 18px;
            font-size: 14px;
            color: #666666;

            span {
                display: block;
                font-size: 14px;
                color: #666666;
                padding-top: 7px;
            }
        }
    }

    .warning {
        font-size: 14px;
        color: #999999;
    }
}

.file {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 13px 18px;
    padding-top: 11px;
    border-radius: 6px;
    border: 1px solid #d6d6d6;
    img {
        height: 50px;
        width: 50px;
        margin-right: 15px;
    }
    div {
        font-size: 14px;
        color: #666;
        width: 150px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
}
</style>
